<template>
  <div>
    <!--  <h1>博客管理</h1>-->
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          label="创建"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.created }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="博客名"
          width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>点赞: {{ scope.row.likeCount }}</p>
            <p>浏览: {{ scope.row.view }}</p>
            <div slot="reference" class="title-wrapper">
              <el-tag size="medium">{{ scope.row.title }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
          label="作者"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-user"></i>
          <span style="margin-left: 10px">{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="修改时间"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-edit"></i>
          <span style="margin-left: 10px">{{scope.row.updated}}</span>
        </template>
      </el-table-column>

      <el-table-column
          align="right">
        <template slot="header" slot-scope="scope">
          <el-input
              @change="search(1)"
              v-model="input"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)">Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <!--关键属性：
      current-page
      page-size
      total
      点击分页的事件：@current-change
      -->
    <el-pagination class="mpage"
                   background
                   layout="prev, pager, next"
                   :current-page="currentPage"
                   :page-size="pageSize"
                   :total="total"
                   @current-change=page>
    </el-pagination>


  </div>
</template>

<script>
import blogCountByLabel from "../charts/blogCountByLabel";

export default {
  inject: ["reload"],
  title: "blogManage",
  components: {blogCountByLabel},


  data() {
    return {
      tableData: [],

      input: '',

      //分页参数
      currentPage: 1,
      currentPage_s: 1,
      total: 0,
      pageSize: 10,

    }
  },
  methods: {

    handleDelete(blogId) {
      this.$axios.delete('/delBlogById/' + blogId, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        console.log('删除成功')
        //删除成功
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        //刷新
        this.reload()
      })

    },

    page(currentPage) {
      const _this = this
      _this.$axios.get("/blogs?currentPage=" + currentPage).then(res => {
        console.log(res)
        //这里json数据 不是直接的res.data.data 因为还包括了分页数等等
        _this.tableData = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size

      })
    },
    //搜索功能
    search(currentPage) {
      this.$axios.get("/searchBlog?searchContent=" + this.input + "&currentPage=" + currentPage).then(res => {
        console.log(res)
        //这里json数据 不是直接的res.data.data 因为还包括了分页数等等
        this.tableData = res.data.data.records
        this.currentPage = res.data.data.current
        this.total = res.data.data.total
        this.pageSize = res.data.data.size
        // window.scrollTo(0, 0);
      })
    },

  },

  created() {

    //钩子函数 初始化就赋值为1
    this.page(1)

  }
}
</script>

<style scoped>
.mpage {
  margin: 0 auto;
  text-align: center;
}

.chart {
}
</style>